<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Аттестат</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

  <style type="text/css">
    body {
      margin: 0;
      /* body-width */ width: 220mm;
      /* body-height */ height: 155mm;
    }

    #back,
    #qr-image {
      position: absolute;
    }

    #name,
    #school,
    #date,
    #year,
    #director {
      position: absolute;
      overflow: auto;
      padding: 0px;
    }

    #date {
      /* date-left */ left: 70mm;
      /* date-top */ top: 106mm;
      /* date-height */ height: 10mm;
      text-align: center;
    }

    #year {
      /* year-left */ left: 144mm;
      /* year-top */ top: 38mm;
      /* year-height */ height: 10mm;
      /* year-width */ width: 17mm;
      text-align: center;
    }

    tr,
    td,
    thead,
    tbody {
      vertical-align: bottom;
      width: 100%;
      height: 100%;
      border-collapse: collapse;
    }

    table,
    tr,
    td {
      margin: 0px;
      padding: 0px;
      border: none;
      border-collapse: collapse;
      outline: 0;
    }

    #name {
      /* name-width */ width: 80mm;
      /* name-top */ top: 30mm;
      /* name-right */ right: 15mm;
      text-align: center;
    }

    #school {
      /* school-top */ top: 50mm;
      /* school-right */ right: 15mm;
      /* school-width */ width: 80mm;
      text-align: center;
    }

    #director {
      /* director-top */ top: 122mm;
      /* director-left */ left: 144mm;
    }

    #back {
      z-index: -1;
      /* back-width */ width: 220mm;
      /* back-height */ height: 155mm;
    }

    #qr-image {
      /* qr-width */ width: 20mm;
      /* qr-height */ height: 20mm;
      /* qr-top */ top: 118mm;
      /* qr-left */ left: 10mm;
    }
  </style>
</head>

<body>
  <img src="file:///PROJECT_FOLDER_PLACEHOLDER/blancs/attestat-nofields.jpg" id="back">
  <table id="date">
    <tr>
      <td>DATE_PLACEHOLDER</td>
    </tr>
  </table>
  <table id="year">
    <tr>
      <td>YEAR_PLACEHOLDER</td>
    </tr>
  </table>
  <div id="name">
    NAME_PLACEHOLDER
  </div>
  <div id="school">
    SCHOOL_PLACEHOLDER
  </div>
  <div id="director">
    _______ /DIRECTOR_PLACEHOLDER/
  </div>

  <img src="file:///PROJECT_FOLDER_PLACEHOLDER/qrcodes/QR_PLACEHOLDER.png" id="qr-image">

</body>

</html>